// 13.333vw = 50px
@tabbarHeight: 13.333vw;
// 12.267vw = 46px
@navHeight: 12.267vw;
.van-nav-bar__placeholder {
  height: 12.267vw !important;
}

html,
body {
  width: 100%;
  height: 100%;
  background-color: @white;
  -webkit-overflow-scrolling: touch;
}

#app {
  height: 100%;
  font: @font;
  color: @font-color-3;
  background-color: @white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.content-container {
  min-height: 100%;
  background-color: @wx-bg-color;
  -webkit-overflow-scrolling: touch;
}

.custom-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  background-color: @wx-bg-color;
  -webkit-overflow-scrolling: touch;
  &.with-nav > div:first-child {
    top: @navHeight;
  }
}

.content-container-with {
  width: 100%;
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  user-select: none;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: @wx-bg-color;
  -webkit-overflow-scrolling: touch;
  &.with-tab {
    top: 0;
    bottom: @tabbarHeight;
  }
  &.tab-wx {
    bottom: calc(@tabbarHeight + env(safe-area-inset-bottom));
  }
  &.with-nav {
    top: @navHeight;
    bottom: 0;
  }
  &.with-tab-nav {
    top: @navHeight;
    bottom: @tabbarHeight;
  }
}

input,
button,
select,
textarea {
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*=====================================
 Iconfont
 弃用unicode引用，采用font-class(性能) + symbol(多色)
======================================*/
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

/*=====================================
 取消Iphone浏览器中点击默认样式
======================================*/
* {
  -webkit-tap-highlight-color: transparent;
}

/*=====================================
 Iphone安全区域样式兼容
======================================*/
.support-safe-area {
  @supports (bottom: constant(safe-area-inset-bottom)) {
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
  }
  @supports (bottom: env(safe-area-inset-bottom)) {
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/*=====================================
 集成常用样式
======================================*/
/* 底部 0.5px */
.bottom-line {
  .bottom-line();
}
/* 四边 0.5px */
.border-line {
  .border-line();
}

/* padding 10px */
.padding-10 {
  padding: 10px;
}

/* 上、下 padding 10px */
.padding-y-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* padding 14px */
.padding-14 {
  padding: 14px;
}

/* 左、右 padding 14px */
.padding-x-14 {
  padding-left: 14px;
  padding-right: 14px;
}

.rounded {
  border-radius: 10px;
}

.costom-tabbar {
  border-bottom: none !important;
}
